<template>
<div v-if="!isReceived">
  <!-- <top-back :topBackParams="topBackParams"></top-back> -->
  <div class="share-coupon">
      <div class="coupons-item share-coupon-con">
          <section class="coupons-box-border clearfix">
              <section class="coupon-left">
                <h1>{{coupon.title}}</h1>
                <!-- <span class="hide" style="display:none;">¥50<i>满100使用</i></span> -->
                <p>生效时间：{{coupon.start_time}}</p>
                <p>到期时间：{{coupon.end_time}}</p>
                <img src="https://img.wifenxiao.com/h5-wfx/images/coup-ico.png" alt="" class="coupon-left-pic"/>
              </section>
              <section class="coupon-right">
                <span class="coupon-price" v-if="coupon.promotion_type === '0'">¥{{coupon.value}}</span>
                <span class="coupon-price" v-else>{{coupon.value}}折</span>
                <span class="coupon-use" v-if="coupon.at_least > 0">满{{coupon.at_least}}使用</span>
                <span class="coupon-use" v-else>不限订单金额</span>
                <!-- <span class="coupon-integral hide" style="display:none;"><i>110</i>{{111111}}</span> -->
                <!-- <a href="javascript:;" class="coupon-share hide" style="display:none;">告诉TA</a> -->
                <!-- <a href="" class="coupon-exchange hide" style="display:none;">立即兑换</a> -->
                <img src="https://img.wifenxiao.com/h5-wfx/images/coup-ico1.png" alt="" class="coupon-right-pic"/>
              </section>
          </section>
          <div class="coupon-tip">{{coupon.description}}</div>
      </div>
      <section class="share-coupon-btn"><a href="javascript:;" id="fxBtn" @click="clickShare">告诉TA</a></section>
      <section class="share-active-info">
        <h2>活动说明：</h2>
        <p>这张{{ftitle_coupon_name}}可以发给您的朋友，您自己无法使用，当您的朋友使用了这张{{ftitle_coupon_name}}后，您将获得可自己使用的等额{{ftitle_coupon_name}}。</p>
      </section>
  </div>
  <share-image ref="shareImage"></share-image>
  <!-- 授权弹出框 -->
  <small-login ref="smalllogin"></small-login>
</div>
<div v-else>
<error-msg :errorInfo="errorInfo"></error-msg>
</div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { getShareCoupon } from '@/api/user/member/memberApi'
import TopBack from '@/components/TopBack/index'
import 'vant/lib/dialog/style'
import { mpShare } from '@/utils/utils'
import small from '@/smallapp/small'
import shareImage from '@/components/wxShare/shareImage'
import SmallLogin from '@/components/SmallLogin/smallLogin'
import ErrorMsg from '@/components/error'

export default Vue.extend({
  name: 'index',
  components: {
    TopBack,
    shareImage,
    SmallLogin,
    ErrorMsg
  },
  data() {
    return {
      shareCouponInfo: {},
      coupon: {},
      jsapi_title: '',
      jsapi_desc: '',
      ftitle_coupon: '',
      ftitle_coupon_name: '',
      isReceived: false,
      errorInfo: ''
    }
  },
  methods: {
    Jump(url) {
      this.$JumpPath(this, url)
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const data = {
        id: this.$route.query.id
      }
      getShareCoupon(data).then((res) => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          const resData = res.data
          this.shareCouponInfo = resData.info
          this.jsapi_title = resData.jsapi_title
          this.jsapi_desc = resData.jsapi_desc
          this.ftitle_coupon = resData.ftitle_coupon
          this.ftitle_coupon_name = resData.ftitle_coupon_name
          this.coupon = resData.coupon
          document.title = resData.ftitle_coupon_name
          this.isReceived = false
          // TODO 小程序分享
          const option = {
            title: resData.jsapi_title,
            imgUrl: resData.jsapi_img,
            shareParam: resData.jsapi_url.split('?')[1]
          }
          if (res.msg) {
            this.$Error(res.msg)
          }
          mpShare(true, false, '/user/pages/shareCoupon/index', option)
        } else {
          this.isReceived = true
          this.$Error(res.msg)
          this.errorInfo = res.msg
        }
      })
    },
    // 点击立即分享
    clickShare() {
      this.$refs.shareImage.showShade = true
    }
  },
  // beforeCreate() {
  //   $('body').addClass('bg_white')
  // },
  // destroyed() {
  //   $('body').removeClass('bg_white')
  // },
  created() {
    this.init()
  },
  mounted() {
    window.addEventListener('wxshow', () => {
      small.HandleShareParams()
      if (!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
      }
    })
    window.$$subscribe('loginReload', (reload) => {
      if (reload) {
        this.init()
      }
    })
  },
  computed: {
    ...mapGetters(['wxConfig'])
  }
  // watch: {
  //   wxConfig(val) {
  //     if (val.user_index_link) {
  //       // console.log('link', val.user_index_link)
  //       this.topBackParams.backLink = val.user_index_link
  //     }
  //   }
  // }
})
</script>

<style lang="scss">
@import "../../../../../src/styles/mixin";
  // @import '../../../../styles/user/coupons/index.scss';
 .share-coupon .hide {
    display: none;
}

.fall-back {
    text-align: center;
    font-size: 36px;
    background: #fff url(https://img.wifenxiao.com/h5-wfx/images/icon_arrowBack.png) 44px center no-repeat;
    background-size: 20px auto;
    height: 96px;
    line-height: 96px;
}

.fall-back a {
    display: block;
    color: #333333;
}

.coupon-left h1 {
    font-size: 36px;
    color: #616161;
    font-weight: bold;
    line-height: 42px;
    margin: 20px 0;
}

.coupon-left span {
    font-size: 36px;
    color: #ff8e08;
    font-weight: bold;
}

.coupon-left span i {
    font-size: 28px;
    padding-left: 12px;
}

.coupon-left p {
    line-height: 40px;
    font-size: 24px;
    color: #333333;
}

.coupon-tip {
    background: #f4f4f4;
    line-height: 44px;
    color: #a6a6a5;
    font-size: 24px;
    text-indent: 20px;
}

.coupon-right span {
    display: block;
    color: #fff3ea;
}

.coupon-right .coupon-price {
    font-size: 40px;
    line-height: 60px;
    margin-top: 30px;
}

.coupon-right .coupon-use {
    font-size: 24px;
    line-height: 60px;
}

.coupon-integral {
    line-height: 80px;
    margin-top: 30px;
    font-size: 32px;
}

.coupon-integral i {
    font-size: 40px;
}

.coupon-right a {
    color: #fff;
    border-radius: 8px;
    background: #e60012;
    text-align: center;
    display: inline-block;
    padding: 0 10px;
    height: 52px;
    line-height: 52px;
    font-size: 24px;
    margin-top: 8px;
    text-indent: 0;
    text-decoration: none;
}


/* 与mycoupon共用  end*/

.share-coupon {
    background: #ff9f08 url(https://img.wifenxiao.com/h5-wfx/images/share-coupon.jpg) no-repeat;
    background-size: 100%;
    padding: 356px 30px 150px;
    overflow-y: scroll;

}

.share-coupon-con .coupons-box-border {
    background: #ff8e08;
    min-height: 232px;
    margin-top: 30px;
    background-size: 4px 100%;
    border-bottom: dashed 1px #c9c9c9;
    position: relative;
}

.share-coupon .coupon-left {
    min-height: 232px;
    width: 62%;
    float: left;
    padding: 20px;
    background: #e9e9e9;
    background-size: 8px 100%;
}

.share-coupon .coupon-right {
    background: #ff8e08;
    min-height: 232px;
    float: left;
    width: 30%;
    text-indent: 8px;
    text-align: center;
}

.share-coupon .coupon-left .coupon-left-pic {
    position: absolute;
    left: -6px;
    top: 0;
    height: 232px;
}

.share-coupon .coupon-right .coupon-right-pic {
    position: absolute;
    right: -10px;
    top: 0;
    height: 232px;
}

.share-coupon-con {
    box-shadow: 0px 1px 44px #7f7f7f;
}

.share-coupon-btn {
    text-align: center;
    margin: 48px 0;
}

.share-coupon-btn a {
    width: 70%;
    height: 120px;
    line-height: 116px;
    display: inline-block;
    background: url(https://img.wifenxiao.com/h5-wfx/images/share.png) no-repeat;
    background-size: 100% 100%;
    font-size: 48px;
    color: #fff;
}

.share-active-info {
    border: dashed 1px #f27e01;
    background: #facd89;
    padding: 30px;
    color: #ff9f08;
    font-size: 32px;
}

.share-active-info h2 {
    font-size: 32px;
    line-height: 52px;
}
.share-active-info p {
  line-height: 48px;
}

</style>
